/**
 * 省市区级联组件
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Cascader, Input } from 'antd';

import { getCityTreeData } from '../../../common/tool';
import RULE from '../../../enums/rule';

// 封装组件
class AddressSelect extends Component {
    constructor(props) {
        super(props);
        this.selectChange = this.selectChange.bind(this);
        this.inputChange = this.inputChange.bind(this);
        this.state = {
            options: [],
            level: props.level || 3,
            selectValue: props.value.slice(0, 3),
            initValue: props.value.slice(3),
        };
    }

    // 组件载入时
    componentDidMount() {
        const { level } = this.state;
        const data = getCityTreeData(level);
        this.setState({
            options: data,
        });
    }

    render() {
        const { options, level, initValue, selectValue } = this.state;
        const input = initValue.join();
        const inputLength = input.length;
        const { disabled } = this.props;
        return (
            <div>
                {level === 4 ? (
                    <Row gutter={8}>
                        <Col span={12}>
                            <Cascader
                                disabled={disabled}
                                defaultValue={selectValue}
                                options={options}
                                onChange={this.selectChange}
                                placeholder="请选择"
                            />
                        </Col>
                        <Col span={12}>
                            <Input
                                disabled={disabled}
                                defaultValue={input}
                                maxLength={RULE.addressLength}
                                onChange={this.inputChange}
                                suffix={`${inputLength}/${RULE.addressLength}`}
                            />
                        </Col>
                    </Row>
                ) : (
                    <Cascader
                        disabled={disabled}
                        defaultValue={selectValue}
                        options={options}
                        onChange={this.selectChange}
                        placeholder="请选择"
                    />
                )}
            </div>
        );
    }

    selectChange(data) {
        const { onChange } = this.props;
        const { initValue } = this.state;
        this.setState({
            selectValue: data,
        });
        onChange(data.concat(initValue));
    }

    inputChange(event) {
        const { onChange } = this.props;
        const { selectValue } = this.state;
        const inputValue = event.target.value;
        const data = inputValue ? [inputValue] : [];
        this.setState({
            initValue: data,
        });
        onChange(selectValue.concat(data));
    }
}

AddressSelect.propTypes = {
    level: PropTypes.number,
    value: PropTypes.array,
    disabled: PropTypes.bool,
    onChange: PropTypes.func,
};

export default AddressSelect;
